import type { TableColumnCtx } from 'element-plus';

import type { FieldProps, OnActionClickFn, RenderScope } from '#/components/data-table';

import dayjs from 'dayjs';

export function useTable(onActionClick: OnActionClickFn): FieldProps[] {
    const formatter = (row: any, column: TableColumnCtx) => {
        switch (column.property) {
            case 'expireTime': {
                return dayjs(row.expireTime).format('YYYY-MM-DD HH:mm:ss');
            }
            case 'loginTime': {
                return dayjs(row.loginTime).format('YYYY-MM-DD HH:mm:ss');
            }
            default: {
                return row[column.property];
            }
        }
    };
    return [
        { prop: 'token', label: '访问令牌', column: { visible: false, showOverflowTooltip: true } },
        { prop: 'username', label: '用户名', search: true, column: { showOverflowTooltip: true } },
        { prop: 'ip', label: '登录地址', search: true },
        { prop: 'location', label: '登录地点', search: true },
        { prop: 'browser', label: '浏览器' },
        { prop: 'os', label: '操作系统' },
        { prop: 'expireTime', label: '过期时间', search: { label: '时效状态', value: '' }, column: { formatter } },
        { prop: 'loginTime', label: '登录时间', column: { formatter } },
        {
            column: {
                width: 90,
                render: [{ auth: 'monitor:online:forceLogout', onClick: (scope: RenderScope) => onActionClick({ code: 'remove', scope }) }],
            },
        },
    ];
}
